package pages

import (
	"fmt"
	"github.com/templui/templui/internal/components/tabs"
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Toast() {
	@layouts.DocsLayout(
		"Toast",
		"Flexible toast component for notifications and feedback.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				Text: "Usage",
				ID:   "usage",
			},
			{
				Text: "Examples",
				ID:   "examples",
				Children: []modules.TableOfContentsItem{
					{
						Text: "Playground",
						ID:   "playground",
					},
				},
			},
			{
				ID:   "api",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "toast",
						Text: "Toast",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Toast",
			Description: templ.Raw("Flexible toast component for notifications and feedback."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Toast",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.ToastDefault(),
				PreviewCodeFile: "toast_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "toast",
					JSFiles:       []string{"toast"},
				})
			}
			@UsageExamples()
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Playground",
					ShowcaseFile:    showcase.ToastPlayground(),
					PreviewCodeFile: "toast_playground.templ",
					ID:              "playground",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api",
			}) {
				@modules.APILegend()
				<div id="toast" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Toast",
						Description: "Notification component that appears temporarily to provide feedback.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the toast element. Auto-generated if not provided.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the toast.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the toast element.",
								Required:    false,
							},
							{
								Name:        "Title",
								Type:        "string",
								Default:     "",
								Description: "Title text displayed in the toast header.",
								Required:    false,
							},
							{
								Name:        "Description",
								Type:        "string",
								Default:     "",
								Description: "Description text displayed below the title.",
								Required:    false,
							},
							{
								Name:        "Variant",
								Type:        "Variant",
								Default:     "default",
								Description: "Visual style variant. Options: 'default', 'success', 'error', 'warning', 'info'.",
								Required:    false,
							},
							{
								Name:        "Position",
								Type:        "Position",
								Default:     "bottom-right",
								Description: "Screen position for the toast. Options: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'.",
								Required:    false,
							},
							{
								Name:        "Duration",
								Type:        "int",
								Default:     "3000",
								Description: "Duration in milliseconds before auto-dismissing the toast.",
								Required:    false,
							},
							{
								Name:        "Dismissible",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to show a close button for manual dismissal.",
								Required:    false,
							},
							{
								Name:        "ShowIndicator",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to show a progress indicator bar at the top.",
								Required:    false,
							},
							{
								Name:        "Icon",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to show an icon based on the variant type.",
								Required:    false,
							},
						},
					})
				</div>
			}
		}
	}
}

templ UsageExamples() {
	@tabs.Tabs(tabs.Props{
		ID: "usage-examples",
	}) {
		@tabs.List(tabs.ListProps{
			Class: "w-full",
		}) {
			@tabs.Trigger(tabs.TriggerProps{
				Value:    "with-htmx",
				IsActive: true,
			}) {
				With HTMX
			}
			@tabs.Trigger(tabs.TriggerProps{
				Value: "full-page-form",
			}) {
				Full Page Form
			}
		}
		<div class="w-full mt-2">
			@tabs.Content(tabs.ContentProps{
				Value:    "with-htmx",
				IsActive: true,
			}) {
				@withHtmx()
			}
			@tabs.Content(tabs.ContentProps{
				Value: "full-page-form",
			}) {
				@fullPageForm()
			}
		</div>
	}
}

var withHtmxCode = fmt.Sprintf(`// Template
%s UserForm() {
	<form hx-post="/save" hx-target="#toast">
	   <input name="email" />
	</form>
	<div id="toast"></div>
}
// Handler
func Save(w http.ResponseWriter, r *http.Request) {
	if err != nil {
		components.Toast(components.ToastProps{
			Text: err.Error(),
			Variant: components.ToastVariantError,
		}).Render(r.Context(), w)
	}
}`, "templ")

templ withHtmx() {
	@modules.Code(modules.CodeProps{
		Language:       "templ",
		ShowCopyButton: true,
		CodeContent:    withHtmxCode,
	})
}

var fullPageFormCode = fmt.Sprintf(`// Template
%s UserForm(error string) {
    if error != "" {
        @components.Toast(components.ToastProps{
            Text: error,
            Variant:    components.ToastVariantError,
        })
    }
    <form method="POST">
        <input name="email"/>
    </form>
}
// Handler
func Save(w http.ResponseWriter, r *http.Request) {
    if err != nil {
        UserForm(err.Error()).Render(r.Context(), w)
    }
}`, "templ")

templ fullPageForm() {
	@modules.Code(modules.CodeProps{
		Language:       "templ",
		ShowCopyButton: true,
		CodeContent:    fullPageFormCode,
	})
}
